<template>
	<view :class="['vh100',{'dark':theme == 'dark'}]">

		<view class="header bgHeader fixed flex alcenter between plr15" style="top:auto">
			<view class="flex alcenter" @tap="showLeft">
				<image :src="theme=='dark' ? '/static/image/bars2.png' : '/static/image/bars.png'" class="h20 wt20">
				</image>
				<text class="ft39 ml10 bold">{{activeDetail.name}}</text>
				<text :class="['ml10 radius2 p2 dwbg redColor ft12',{'upbg greenColor':change>=0}]"
					v-if="change">{{change | toFixed2}} %</text>
			</view>

			<view>
				<!-- 涨跌记录 -->
				<!-- <image @click="funsItemClick(1)"
					:src="theme=='dark' ? '/static/image/zdjl2.png' : '/static/image/zdjl1.png'"
					class="h20 wt20 wtop20"></image> -->

				<!-- 投注记录 -->
				<!-- <image @click="funsItemClick(2)"
					:src="theme=='dark' ? '/static/image/tzjl2.png' : '/static/image/tzjl1.png'"
					class="h20 wt20 wtop21"></image> -->
					
				<image @click="funsItemClick(2)"
					:src="theme=='dark' ? '/static/image/zdjl2.png' : '/static/image/zdjl1.png'"
					class="h20 wt20 wtop21"></image>

				<!-- 查看K线走势 -->
				<image @tap="linkKline" :src="theme=='dark' ? '/static/image/qushi2.png' : '/static/image/qushi1.png'"
					class="h20 wt20 wtop22"></image>
			</view>
		</view>

		<view class="pt50 bgPart">
			<u-line color="#5559691f"></u-line>
			<view class=" between plr166 pb10 mt10">
				<view class="data">
					<view style="width: 100%; height:750rpx">
						<!-- <optionKilne title="测试" :symbol="symbol" period="1min" size="300" type="0"></optionKilne> -->
							<l-echart ref="chart"></l-echart>
					</view>
				</view>
			</view>
		</view>
		<!-- 头部左边币种列表内容 -->

		<view class="header-left">
			<uni-drawer :visible="drawShow" mode="left" @close="hideLeft">
				<scroll-view style="height: 100%;" scroll-y="true">
					<view class="tr mt10 mr10">
						<uni-icon size="30" type="arrowthinright" @tap="hideLeft"></uni-icon>
					</view>

					<view>
						<view class="bor5" v-for="(item, index) in marketList" :key="index">
							<view class="flex between plr10 ptb20" :class="name==item.name ? 'bg1' : ''"
								@tap="selectCurrency(item,true)">
								<view class="color1">{{ item.name }}</view>
								<view :class="item.rose < 0 ? 'red' : 'green'">{{item.rose < 0?"":"+"}}{{item.rose|toFixed2}}%</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</uni-drawer>
		</view>


		<view :class="['wrap','funs',{'darksss':theme=='dark'}]" style="margin-top: 14vw;">

            <u-line color="#5559691f"></u-line>

			<!-- <u-row gutter="16" justify="around">
				<u-col span="4">
					<view class="">
						<view class="bgtxt bgtxt5">{{Number(startingOption.totalBuy).toFixed(activeDetail.baseCoinScale)}} USDT</view>
						<view class="bgtxt demo-layout bg-purple txt1">{{$t('bico.W172')}}</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="">
						<view class="bgtxt6 bgtxt5">{{Number(myStartingPrice).toFixed(activeDetail.baseCoinScale)}} USDT</view>
						<view class="bgtxt6 demo-layout bg-purple txt2">{{$t('bico.W173')}}</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="">
						<view class="bgr3 bgtxt5">{{Number(startingOption.totalSell).toFixed(activeDetail.baseCoinScale)}} USDT</view>
						<view class="bgr3 demo-layout bg-purple txt3">{{$t('bico.W174')}}</view>
					</view>
				</u-col>
			</u-row> -->

            <!-- 进度条 适应 白昼皮肤切换，去除悬浮样式 -->
            <u-line-progress :striped="true" :percent="perVal" :show-percent="true" :round="true" :striped-active="true" active-color="#19be6b" inactive-color="#f8f9f9">
			</u-line-progress>
			<u-row gutter="16" justify="around">
				<u-col span="4">
					<view class="">
						<view class="bgtxt"> {{openingOption?openingOption.optionNo+" "+$t('bico.W171') : '-'}} </view>
						<view class="bgtxt txt1"> {{startingOption.optionNo}} {{$t('bico.W171')}}</view>
					</view>
				</u-col>
				<!--格式化 国际时间 封盘实际时间以 北京时间为准-->
				<u-col span="4">
					<view class="">
						<view class="bgtxt6">{{$t('bico.W175')}}</view>
						<view class="bgtxt6 txt2">{{activeDetail.openTimeGap}}S {{$t('bico.W176')}}</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="">
						<view class="bgr3">{{openingOption?$t('bico.W627') : '-'}}</view>
						<view class="bgr3 txt3">{{zdStatus[startingOption.result]}}</view>
					</view>
				</u-col>
			</u-row>

			<u-line color="#5559691f"></u-line>
			<!-- 选择下单金额 -->
			<!-- <swiper class="swiper" @change="change">
					<swiper-item>
						<u-row gutter="16" justify="around">
							<u-col span="2" v-for="(item,index) in priceList" v-if="index<5" @click="changeButton(index)">
								<u-button :class="[{'active':index==activeIndex},'activeMode']" shape="square" @click="changeButton(index)" >
								{{item}}
								
								</u-button>
							</u-col>
						</u-row>
					</swiper-item>
					<swiper-item v-if="priceList.length>5">
						<u-row gutter="16" justify="around">
							<u-col span="2" v-for="(item,index) in priceList" v-if="index>4">
								<u-button :class="[{'active':index==activeIndex},'activeMode']" shape="square" @click="changeButton(index)" >{{item}}</u-button>
							</u-col>
						</u-row>
					</swiper-item>
					<swiper-item v-if="priceList.length>10">
						<u-row gutter="16" justify="around">
							<u-col span="2" v-for="(item,index) in priceList" v-if="index>9">
								<u-button :class="[{'active':index==activeIndex},'activeMode']" shape="square" @click="changeButton(index)" >{{item}}</u-button>
							</u-col>
						</u-row>
					</swiper-item>
			</swiper> -->
			<view class="input-box">
				<view class="input-title">
					下单数量
				</view>
				<view class="input-el">
					<input type="text" name="" id="" v-model="inputValue" placeholder="请输入下单数量">
					
				</view>
			</view>
			<u-row gutter="16" justify="around">

				<!-- 间隔槽 -->
				<u-gap height="100" bg-color="#bbb"></u-gap>
				
				<u-col style="display: flex; justify-conten;">
					<view class="" style="display: flex;">
						<view class="bgtxt" style="margin-right: 20px;">{{$t('trade.placeOrder')}}</view>
				        <view class="bgtxt" >{{optionDayTotal}}</view>
					</view>
				</u-col>
				<u-col style="display: flex; justify-content: space-between;">
					<view class="" style="display: flex;">
						<view class="bgtxt" style="margin-right: 20px;">{{$t('trade.todayyk')}}</view>
				        <view class="bgtxt" :class="[{'green':incomeTotal>=0},{'red':incomeTotal<0}]">{{incomeTotal}}$</view>
					</view>
					<view class="" style="display: flex;">
						<view class="bgtxt" style="margin-right: 20px;">{{$t('trade.totalOrder')}}</view>
					    <view class="bgtxt" :class="[{'green':incomeTotals>=0},{'red':incomeTotals<0}]">{{incomeTotals}}$</view>
					</view>
				</u-col>
				
				
				<u-col span="3">
					<view class="">
						<view class="bgtxt">{{$t('bico.W177')}}</view>

					</view>
				</u-col>
				<u-col span="3">
					<view class="">
						<view class="bgtxt">{{usePrice}}</view>

					</view>
				</u-col>
				<u-col span="3">
					<view class="">
						<view class="bgtxt6">{{$t('bico.W178')}}</view>

					</view>
				</u-col>
				<u-col span="3">
					<view class="">
						<!-- <view class="bgr3">{{buyPrice}} USDT</view> -->
						<view class="bgr3">{{inputValue || 0}} USDT</view>

					</view>
				</u-col>

				<!-- 间隔槽 -->
				<u-gap height="100" bg-color=""></u-gap>

				<u-col span="5">
					<view class="">
						<u-button type="success" @click="submit(0)">{{syTime<=0?$t('bico.W624'): $t('bico.W625')+syTime+'S'}}</u-button>
					</view>
				</u-col>
				<u-col span="2">
					<view class="">
						<view>
							<text class="grid-text1">V<text class="grid-text2">S</text></text>
						</view>
					</view>
				</u-col>
				<u-col span="5">
					<view class="">
						<u-button type="warning" @click="submit(1)">{{syTime<=0?$t('bico.W624'): $t('bico.W626')+syTime+'S'}}</u-button>
					</view>
				</u-col>

			</u-row>


		</view>
	</view>
	</view>
</template>

<script>
	var socketInstance;
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex';
	import uniDrawer from '@/components/uni-drawer.vue';
	import uniIcon from '../../components/uni-icon.vue';
	import uniPopup from '@/components/uni-popup.vue';
	// import optionKilne from '@/components/optionKline.vue';
	import {
		contractOptionHistory,
		contractOptionStarting,
		contractOptionOpening,
		contractOptionCoinList,
		contractOptionOrderAdd,
		contractOptionOrderCurrent,
		wallet,timeCount,
		sysTime,
		commonKlineApi
	} from '../../common/apiString.js';
	import {
		myMixins
	} from '@/common/myMixins.js' //加入全局下拉刷新
	 import * as echarts from 'echarts';

	export default {
		mixins: [myMixins],
		components: {
			uniDrawer,
			uniIcon,
			uniPopup,
			// optionKilne
		},
		data() {
			return {
				inputValue:'',//下单数量
				customStyle:{
					width: '5rpx'
				},
				perVal: 75.6,
				historyArr: [],
				activeDetail: {},
				activeDetailFlag: 0,
				//开仓金额
				myStartingPrice: "0.00",
				//选择的投注数量
				buyPrice: 0,
				sellMax: '1',
				buyMax: '1',
				name: '',
				drawShow: false,
				selectShow: false,
				activeIndex:"null", //按钮选中下表
				change: '', //涨跌幅
				symbol: 'BTC/USDT',
				ptype: 0,
				priceList: [],
				sellList: [
					['0.00', '0.00'],
					['--', '--'],
					['--', '--'],
					['--', '--'],
					['--', '--']
				],
				buyList: [
					['0.00', '0.00'],
					['--', '--'],
					['--', '--'],
					['--', '--'],
					['0.00', '0.00']
				],
				marketList: [], //交易对列表
				usePrice: 0, //期权钱包余额
				sysTime: 0, //系统时间
				incomeTotal:0,//今日盈亏
				incomeTotals:0,//总盈亏
				optionDayTotal:0,//今日下单
				getCompleteList: null,
				zdStatus: {
					0: this.$t('bico.W179'),
					1: this.$t('bico.W180'),
					2: this.$t('bico.W181'),
					3: this.$t('bico.W182'),
					4: this.$t('bico.W183'),
				},
				startingOption: {},
				openingOption: {},
				syTime: 0,
				secend:0,
				loadid:-1,
				option: {
					xAxis: {
						//日子'2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'
						data: []
					},
					yAxis: { // 纵轴标尺固定
						// type : 'value',
						// scale : true,
						// max : 19170.00,
						// min : 19080.00,
						// splitNumber : 5,
						// boundaryGap : [10, 10]
					},
					series: [{
						type: 'k',
						data: [
							//开收低高
							// [20, 34, 10,38],
							// [40, 35, 30, 50],
							// [31, 38, 33, 44],
							// [38, 15, 5, 42]
						]
					}]
				}


			};
		},
		filters: {
			toFixed2: function(value) {
				value = Number(value);
				return value.toFixed(2);
			},
			toFixed4: function(value) {
				value = Number(value);
				return value.toFixed(4);
			},
			isNumber: function(value) {
				var regPos = /^\d+(\.\d+)?$/;
				return regPos.test(value)
			},
			dateFormat: function(tick) {
				var data = new Date(Number(tick));
				var h = data.getHours() < 10 ? "0" + data.getHours() : data.getHours()
				var m = data.getMinutes() < 10 ? "0" + data.getMinutes() : data.getMinutes()
				var s = data.getSeconds() < 10 ? '0' + data.getSeconds() : data.getSeconds()
				return h + ":" + m + ":" + s;

			},
		},
		watch: {

		},
		onLoad(option) {
			console.log(555,option)
			uni.setNavigationBarTitle({
				title: this.$t('bico.W169'),
			})
			if(option.id){
				this.loadid = option.id
			}
			this.$utils.setTheme(this.theme);
			this.init();
		},
		beforeUnmount() {
			console.log('Option.......beforeUnmount')
		},
		onPullDownRefresh() {
			this.init();
		},
		onShow() {
			var that = this;
			// uni.setNavigationBarColor({
			// 	frontColor: "#000000",
			// })
			//this.$utils.setTheme(this.theme);

			//this.handicap();
			// var that=this
			if (that.getCompleteList == null) {
				that.getCompleteList = setInterval(function() {
					that.getTime();
				}, 2000)
			}


		},
		async mounted() {
			

			this.$refs.chart.init(echarts, chart=> {
				this.getKlineData()
			});
		},
		onHide() {
			//this.$socket.closeSocket(socketInstance);
			clearInterval(this.getCompleteList);
			this.getCompleteList = null
		},
		created() {
			console.log(333,this.priceList)
		},
		computed: {
			...mapState({
				theme: state => state.theme
			}),
		},
		beforeDestroy() {
			this.getCompleteList = clearInterval(this.getCompleteList);
		},
		methods: {
			d_formatTime(ms){
				let d = new Date(parseInt(ms));
				let Y = d.getFullYear();
				let M = d.getMonth()+1>9?d.getMonth()+1:'0'+(d.getMonth()+1);
				let D = d.getDate()>9?d.getDate():'0'+d.getDate();
				let h = d.getHours()>9?d.getHours():'0'+d.getHours();
				let m = d.getMinutes()>9?d.getMinutes():'0'+d.getMinutes();
				// return `${Y}-${M}-${D} ${h}:${m}`;
				return `${h}:${m}`;
			},
			setOption(obj,sym){
				var that = this
				var countList = []
				var dateList = []
				var fix = that.activeDetail.baseCoinScale
				console.log("that.activeDetail.baseCoinScale",fix)
				var min=100000000
				var max = 0.0
				obj.forEach(r=>{
					var klineArr=[]
					klineArr.push(Number(r.open))
					klineArr.push(Number(r.close))
					klineArr.push(Number(r.low))
					klineArr.push(Number(r.high))
					// item.open = Number(item.open)
					// item.close = Number(item.close)
					// item.high = Number(item.high)
					// item.low = Number(item.low)
					r.time =(Number(r.id) * 1000),
					dateList.push(that.d_formatTime(r.time))
					countList.push(klineArr)
					var mm = Math.max.apply(null,klineArr);    //获取最大值
					var mi = Math.min.apply(null,klineArr);    //获取最小值
					if(mm>max){
						max = mm
					}
					if(mi<min){
						min = mi
					}
					
				})
				console.log("min",min)
				console.log("max",max)
				//debugger
				this.option = {
					legend: {
					    data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
					    inactiveColor: '#777'
					  },
					  tooltip: {
					      trigger: 'axis',
					      axisPointer: {
					        animation: false,
					        type: 'cross',
					        lineStyle: {
					          color: '#376df4',
					          width: 2,
					          opacity: 1
					        }
					      }
					    },
					
					xAxis: {
					    type: 'category',
					    data: dateList,
					    axisLine: { lineStyle: { color: '#8392A5' } },
						splitLine: { show: true }
					},
					yAxis: {
					    scale: true,
					    axisLine: { lineStyle: { color: '#8392A5' } },
						//splitLine: { show: false }
					},
					grid: {
						top:30,
					    bottom: 60,
						left:'10%'
					},
					// dataZoom: [
					//     {
					//       textStyle: {
					//         color: '#8392A5'
					//       },
					//       handleIcon:
					//         'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
					//       dataBackground: {
					//         areaStyle: {
					//           color: '#8392A5'
					//         },
					//         lineStyle: {
					//           opacity: 0.8,
					//           color: '#8392A5'
					//         }
					//       },
					//       brushSelect: true
					//     },
					//     {
					//       type: 'inside'
					//     }
					// ],
					  
					series: [
					    {
					      type: 'candlestick',
					      name: sym,
					      data: countList,
					      itemStyle: {
					        color: '#fd4245',
					        color0: '#19be6b',
					        borderColor: '#fd4245',
					        borderColor0: '#19be6b'
					      }
					    },
					    {
					      name: 'MA5',
					      type: 'line',
					      data: that.calculateMA(5, countList),
					      smooth: true,
					      showSymbol: false,
					      lineStyle: {
					        width: 1
					      }
					    },
					    {
					      name: 'MA10',
					      type: 'line',
					      data: that.calculateMA(10, countList),
					      smooth: true,
					      showSymbol: false,
					      lineStyle: {
					        width: 1
					      }
					    },
					    {
					      name: 'MA20',
					      type: 'line',
					      data: that.calculateMA(20, countList),
					      smooth: true,
					      showSymbol: false,
					      lineStyle: {
					        width: 1
					      }
					    },
					    {
					      name: 'MA30',
					      type: 'line',
					      data: that.calculateMA(30, countList),
					      smooth: true,
					      showSymbol: false,
					      lineStyle: {
					        width: 1
					      }
					    }
					  ]
				}
				//console.log("minmax",min,max)
			},
			calculateMA(dayCount, data) {
			  var result = [];
			  for (var i = 0, len = data.length; i < len; i++) {
			    if (i < dayCount) {
			      result.push('-');
			      continue;
			    }
			    var sum = 0;
			    for (var j = 0; j < dayCount; j++) {
			      sum += +data[i - j][1];
			    }
			    result.push(sum / dayCount);
			  }
			  return result;
			},
			getKlineData(isFrist=true){
				var that = this;
				var sym = "BTC/USDT"
				if(that.activeDetail.symbol !=undefined && that.activeDetail.symbol!=''){
					sym = that.activeDetail.symbol
				}else{
					sym = that.marketList[0].symbol
				}
				that.$utils.initDataToken({url:commonKlineApi,data:{"symbol":sym,period:'1min',size:30,type:0},type:'POST'},(res,msg)=>{
					// if(isFrist){
						that.setOption(res,sym)
						// res.forEach((item, i) => {

						// 	var klineArr=[]
						// 	klineArr.push(Number(item.open))
						// 	klineArr.push(Number(item.close))
						// 	klineArr.push(Number(item.low))
						// 	klineArr.push(Number(item.high))
						// 	// item.open = Number(item.open)
						// 	// item.close = Number(item.close)
						// 	// item.high = Number(item.high)
						// 	// item.low = Number(item.low)


						// 	item.time =(Number(item.id) * 1000),
						// 	that.option.xAxis.data.push(that.d_formatTime(item.time))
						// 	that.option.series[0].data.push(klineArr)
						// })
						this.$refs.chart.setOption(that.option)
						console.log("option",that.option)
					// }else{
					// 	var klineArr=[]

					// 	var item = res[res.length-1]

					// 	item.open = Number(item.open)
					// 	item.close = Number(item.close)
					// 	item.high = Number(item.high)
					// 	item.low = Number(item.low)
					// 	item.time =(Number(item.id) * 1000),
					// 	klineArr.push(item.open)
					// 	klineArr.push(item.close)
					// 	klineArr.push(item.low)
					// 	klineArr.push(item.high)

					// 	var llll = that.option.series[0].data.length-1
					// 	if(that.option.series[0].data[llll][0] == item.open){
					// 		console.log("tongy",that.d_formatTime(item.time))
					// 	}else{
					// 		that.option.xAxis.data.push(that.d_formatTime(item.time))
					// 		that.option.series[0].data.push(klineArr)
					// 		this.$refs.chart.setOption(that.option)
					// 	}

					// }
					// console.log("data",that.option.series[0].data)


				});
			},
			showLeft(){
				var that =this
				//延时
				setTimeout(function() {that.drawShow = true}, 10);

				this.getCompleteList = clearInterval(this.getCompleteList);
			},
			hideLeft(){
				var that = this
				that.drawShow = false
				if (that.getCompleteList == null) {
					that.getCompleteList = setInterval(function() {
						that.getTime();
					}, 2000)
				}
			},
			changeButton(index){
				this.activeIndex = index
				this.buyPrice = this.priceList[index]
			},
			funsItemClick(index) {
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/Option/Riseandfall?symbol=' + this.activeDetail.symbol //涨跌记录
					})
				};
				if (index == 2) {
					uni.navigateTo({
						url: '/pages/Option/Bettingrecord' //开仓记录
					})
				};
			},
			getData(){
				var that = this
				that.getStarting()
				that.getOpening()
				that.getHistory()

			},

			getTime() {
				var that = this
				that.$utils.initDataToken({
						url: timeCount,
						data:{'symbol':that.activeDetail.symbol,},
						type: 'post',
					},
					res => {
						var that = this
						// res.num //过去秒数
						// res.systemTime //系统时间
						// res.createLongTime //创建时间
						let z = this.activeDetail.openTimeGap //投注时间
						//已经过去的时间 = 系统时间-开盘时间
						var t = res.num
						this.syTime = z - t
						var perVal = parseInt(t / z * 100)
						that.perVal = perVal > 100 ? 100 : perVal
						that.sysTime = res.systemTime
						if (that.syTime <= 0) {
							that.selectCurrency(that.activeDetail)
						}
					}
				);
				this.secend=this.secend+1
				if(this.secend%2 == 0 && this.perVal<100){
				  that.getStarting()
				}
				if(this.secend%5 == 0 && this.perVal<100){
				  that.getKlineData(false)
				}
				if(this.secend%6 == 0 && this.perVal<100){
				  this.getData()
				}
				
				
			},
			getHistory() {
				var that = this

				that.$utils.initDataToken({
					url: contractOptionHistory,
					type: 'post',
					data: {

						symbol: that.activeDetail.symbol,
						count: '18',
					}
				}, res => {
					that.historyArr = res.records.reverse()
				});
			},
			getWallet() {
				var that = this
				var valuation = "USDT"
				that.$utils.initDataToken({
					url: wallet,
					type: 'post',
					data: {
						valuation: valuation,
						hide: 'N',
						type: 'OPTION',
					}
				}, res => {
					that.incomeTotal=Number(res.incomeTotal).toFixed(4);
					that.incomeTotals=Number(res.optionTotal).toFixed(2);
					that.optionDayTotal = res.optionDayTotal;
					var l = res.list;
					for (var i = 0; i < l.length; i++) {
						if (l[i].type == valuation) {
							that.usePrice = Number(l[i].usedPrice).toFixed(4);
						}
					}
				});
			},

			getOpening() {
				var that = this
				that.$utils.initDataToken({
					url: contractOptionOpening,
					type: 'post',
					data: {
						symbol: that.activeDetail.symbol,
					}
				}, res => {
					that.openingOption = res[0]
				});
			},
			getStarting() {
				var that = this
				that.$utils.initDataToken({
					url: contractOptionStarting,
					type: 'post',
					data: {
						symbol: that.activeDetail.symbol,
					}
				}, res => {
					this.startingOption.totalBuy = res[0].totalBuy
					this.startingOption.totalSell = res[0].totalSell
					if (this.startingOption.id !== res[0].id) {
						this.startingOption = res[0];
						this.d_percentage = 0
						this.init()
						// this.getMyStartingOptionOrder(this.startingOption.optionNo); // 获取正在投注的我的订单
					}

				})
			},

			// 选择交易对
			selectCurrency(options,chartClear=false) {
				var that = this;
				that.hideLeft()
				that.activeDetail = options
				that.getStarting()
				that.getOpening()
				that.getHistory()
				that.priceList = that.activeDetail.amount.split(',')

				if(chartClear){
					that.option.xAxis.data=[]
					that.option.series.data=[]
					this.$refs.chart.clear()
					this.$refs.chart.init(echarts, chart=> {
						that.getKlineData()
					});
					//that.getKlineData()
				}

				//that.selectPrice(0)
				//that.selectPrice(0)


			},
			shows() {
				return;
			},
			init() {
				let that = this;
				this.getWallet()
				this.$utils.initDataToken({
					url: contractOptionCoinList,
					type: 'post'
				}, (res, msg) => {
					//uni.stopPullDownRefresh();
					this.marketList = res.data;
					this.marketList.forEach(item =>{

					})
					if (this.marketList.length > 0) {
						if (that.activeDetailFlag == 0) {
							if(this.loadid !=-1){
								this.marketList.forEach(item=>{
									if(item.id == this.loadid){
										that.selectCurrency(item,true)
									}
								})
							}else{
								that.selectCurrency(this.marketList[0],true)
							}

							that.activeDetailFlag = 1
						}

					}
				})
			},


			submit(num) {
				var that = this
				if (that.syTime <= 0) {
					that.$utils.showLayer(this.$t('bico.W184'),)
					return
				}
				if (this.inputValue == 0) {
					that.$utils.showLayer(this.$t('bico.W185'),);
					return;
				}
				if (Number(this.inputValue) > Number(this.usePrice)) {
					that.$utils.showLayer(this.$t('bico.W186'),);
					return;
				}
				// uni.showLoading()
				
				this.$utils.initDataToken({
					url: contractOptionOrderAdd,
					data: {						
						// symbol: this.startingOption.symbol,
						symbol:this.activeDetail.name,
						direction: num,
						optionId: this.startingOption.optionNo,
						amount: this.inputValue
					},
					type: 'post'
				}, (res, msg) => {
					// uni.hideLoading()
					that.$utils.showLayer(this.$t('bico.W187'),)
					this.getMyOptionOrder(this.startingOption.optionNo)
					this.getWallet();
					this.inputValue = 0;
					//myStartingPrice
				})
			},
			getMyOptionOrder(optionNo) {
				this.$utils.initDataToken({
					url: contractOptionOrderCurrent,
					data: {
						symbol: this.startingOption.symbol,
						optionId: optionNo,
					},
					type: 'post'
				}, (res, msg) => {
					if (res.data != "") {
						this.myStartingPrice = res.data.betAmount ? res.data.betAmount : '0.00'
					}
					//myStartingPrice
				})
			},

			// 跳转k线
			linkKline() {
				var that = this;
				uni.navigateTo({
					url: '/pages/market/kline?type=0&option=option&symbol=' + that.activeDetail.symbol
				});
			},


		}
	}
</script>

<style>

	.swiper {
			height: 120rpx;
		}
	..grid-text {
		font-size: 36rpx;
		/* margin-top: 3rpx; */
		width: 5vw;
		color: $u-type-info;
		text-align: center;
	}
	.active{
		background-color: #19be6b;
		color: white;
	}
	.activeMode{
		border-radius: 24%;
		/* border: 2px solid #4CAF50; */ /*边框 Green */

	}
	.data {
		width: 100vw;
		/* background-color: #edf1f5; */
		height: 74vw;
	}
	.input-box{
		display: flex;
		
	}
	.input-title{
		height: 80rpx;
		line-height: 80rpx;
		margin: 0 30rpx 0 20rpx;
	}
	.input-el{
		width: 200px;
		height: 80rpx;
		line-height: 80rpx;
		border:1rpx solid #ccc;
		border-radius: 16rpx; 
	}
	.input-el input{
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 20rpx;
	}
	.listData {
		float: inherit;
		width: 10vw;
		text-align: center;
	}

	.status_bar {
		height: 60upx;
		width: 100%;
	}

	page {
		background-color: #FFFFFF;
		width: 100.0vw;
		height: 100.0vh;
		overflow-y: scroll;
	}

	.content-left-header {
		height: 70upx;
		overflow: hidden;
	}

	.content-left-text {
		height: 70upx;
		line-height: 70upx;
		color: #828181;
		background: #F7F7FB;
		text-align: center;
	}

	.bor {
		margin-top: -30px;
		display: inline-block;
		width: 16px;
		height: 100px;
		left: calc(50% - 10px);
		background: #FFFFFF;
		transform: rotate(25deg);
		-ms-transform: rotate(25deg);
		-moz-transform: rotate(25deg);
		-webkit-transform: rotate(25deg);
		-o-transform: rotate(25deg);
	}

	.p2 {
		padding: 0 4upx;
	}

	.dwbg {
		background: rgba(250, 82, 82, .1);
	}

	.upbg {
		background: rgba(18, 184, 134, .1);
	}

	.asks>view {
		background-image: linear-gradient(rgba(250, 82, 82, .1), rgba(250, 82, 82, .1));
	}

	.bids>view {
		background-image: linear-gradient(rgba(18, 184, 134, .1), rgba(18, 184, 134, .1));
	}

	.asks>view,
	.bids>view {
		background-position: 100%;
		background-repeat: no-repeat;
		background-size: 0% 100%;
	}

	.content-left-price {
		height: 72upx;
		line-height: 72upx;
		text-align: center;
	}

	.show-content {
		width: 88%;
	}

	.lever-password {}

	.twd30 {
		width: 8vw;
		height: 8vw;
	}

	.ft39 {
		font-size: 4vw;
		font-weight: bold;
	}

	.ft14 {
		font-size: 14pxvw;
		font-weight: 400;
	}

	uni-view {
		box-sizing: border-box;
		font-size: 14px;
		line-height: 1.8;
		font-weight: 400;
	}

	.pb10 {
		padding-bottom: 150px;
	}

	.pt5 {
		padding-top: 0px;
	}

	.pb10 {
		padding-bottom: 0.5vw;
	}

	.ft18 {
		font-size: 14pxvw;
	}

	.pl45 {
		padding-left: 10vw;
	}

	.tw70 {
		position: relative;
		top: 0.5vw;
		right: 0vw;
		left: -1vw;
	}



	.uni-radio .uni-radio-input {
		-webkit-appearance: none;
		appearance: none;
		margin-right: 10px;
		outline: 0;
		border: 1px solid #d1d1d1;
		background-color: #fff;
		border-radius: 24%;
		width: 4.5vw;
		height: 4.5vw;
		position: relative;
	}

	.ft16 {
		font-size: 14px;
	}

	.status_bar {
		height: 4vw;
		width: 100%;
	}

	.wrap {
		padding: 24rpx;
	}

	.u-progress-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u-progress-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #fb9126;
	}

	.u-progress-info {
		font-size: 28rpx;
		padding-left: 16rpx;
		letter-spacing: 2rpx
	}

	.grid-text1 {
		margin-right: 0vw;
		width: 8vw;
		height: 8vw;
		border-radius: 0%;
		position: relative;
		top: 1vw;
		right: 0;
		left: 3vw;
		color: #00b359;
		font-weight: 700;
		font-size: 6VW;
		font-family: Times New Roman,Times,serif;
	}

	.grid-text2 {
		margin-right: 0vw;
		width: 8vw;
		height: 8vw;
		border-radius: 0%;
		position: relative;
		top: 0vw;
		right: 0;
		left: 0vw;
		color: #ec9719;
		font-weight: 700;
		font-size: 5VW;
		font-style: italic
	}

	.u-row {
		margin: 40rpx 0;
	}

	.demo-layout {
		height: 50rpx;
		border-radius: 8rpx;
	}

	.bg-purple {
		        background: #29344808;
		    border-radius: 4px;
	}

	.bgr3{

		    transition: all 0.15s;

		    height: 30px;
		    line-height: 30px;
		    text-align: right;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}


	.u-btn--default {
	    color: #99a9c5;
	    border-color: #c0c4cc00;
	    background-color: #ffffff00;
	}
	uni-swiper .uni-swiper-slides {
		position: absolute;
		left: -8px;
		top: 0;
		right: 58px;
		bottom: 0;
	}
	.bgtxt {
		position: relative;
		border: 0;
		display: inline-flex;
		overflow: visible;
		line-height: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		/*justify-content: center;*/
		cursor: pointer;

		z-index: 1;
		box-sizing: border-box;
		transition: all 0.15s;
		font-size: 14px;
		height: 30px;
		line-height: 30px;
	}
	.bgtxt6 {
		position: relative;
		border: 0;
		display: inline-flex;
		overflow: visible;
		line-height: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		cursor: pointer;

		z-index: 1;
		box-sizing: border-box;
		transition: all 0.15s;
		font-size: 14px;
		height: 30px;
		line-height: 30px;
	}
	.bgtxt5 {

		font-size: 12px;
	}

	.plr166{

		padding-left: 0px;
		padding-right: 0px;
	}


	.txt1 {
		color: #19be6b;
	}

	.txt2 {
		color: #ff9900;
	}

	.txt3 {
		color: #fa3534;
	}

	.h20 {
		height: 20px;
	}

	.wt20 {
		width: 20px;
	}

	.wtop20 {
		margin: 0 0vw;
	}

	.wtop21 {
		margin: 0 4vw;
	}

	.wtop22 {
		margin: 0 0vw;
	}
	
	.plr166 {
	    padding-left: 15px;
	    padding-right: 15px;
	}
</style>
